import React, { Component } from 'react'
import Header from './Header'
import Sidemenu from './Sidemenu'
import RoomShow from './RoomShow'
import ShoppingCart from './ShoppingCart';
import "./App.css"
import hotel from './Data'

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      hotel,
      current: hotel[0].items[0],
      cart: [],
      id: 1
    }
  }

  _handleClick = item => {
    this.setState({ current: item })
  }

  _buy = room => {
    let id = this.state.id
    let newroom = { roomId: this.state.id, id: room.id, name: room.name, price: room.price, count: room.count, total: Number.parseInt(room.price) * Number.parseInt(room.count) }
    console.log(newroom)
    let cart = this.state.cart
    cart.push(newroom)
    this.setState({ id: ++id })
    this.setState({ cart })
    console.log(this.state.cart)
  }
  _deleteItem=item=>{
    let cart = this.state.cart
    let index = cart.indexOf(item)
    cart.splice(index, 1)
    this.setState({ cart })
  }
  render() {
    return (
      <div>
        <Header></Header>
        <div id="container">
          <Sidemenu hotels={this.state.hotel} handleClick={this._handleClick}></Sidemenu>
          <RoomShow rooms={this.state.current} buy={this._buy}></RoomShow>
          <ShoppingCart cart={this.state.cart} deleteItem={this._deleteItem}></ShoppingCart>
        </div>
      </div>
    )
  }
}
